<template>
  <div class="not-found-container">
    <!-- 404 数字动画 -->
    <div class="number-container">
      <span class="number" :class="{ 'animate-number': isAnimated }">4</span>
      <span class="number" :class="{ 'animate-number': isAnimated }">0</span>
      <span class="number" :class="{ 'animate-number': isAnimated }">4</span>
    </div>
    <!-- 提示信息 -->
    <h1 class="message" :class="{ 'animate-message': isAnimated }">页面未找到</h1>
    <p class="description" :class="{ 'animate-description': isAnimated }">你访问的页面好像迷路了，请检查网址或返回主页。</p>
    <!-- 返回主页按钮 -->
    <router-link to="/" class="home-button" :class="{ 'animate-button': isAnimated }">返回主页</router-link>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 控制动画是否开始的状态
const isAnimated = ref(false);

// 页面挂载后开始动画
onMounted(() => {
  setTimeout(() => {
    isAnimated.value = true;
  }, 100);
});
</script>

<style scoped lang="scss">
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f4f4f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.number-container {
  display: flex;
  font-size: 200px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.number {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;

  &.animate-number {
    opacity: 1;
    transform: translateY(0);
  }

  &:nth-child(1) {
    transition-delay: 0.1s;
  }

  &:nth-child(2) {
    transition-delay: 0.2s;
  }

  &:nth-child(3) {
    transition-delay: 0.3s;
  }
}

.message {
  font-size: 48px;
  color: #333;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease 0.4s;

  &.animate-message {
    opacity: 1;
    transform: translateY(0);
  }
}

.description {
  font-size: 24px;
  color: #666;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease 0.5s;

  &.animate-description {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease 0.6s;

  &:hover {
    background-color: #0056b3;
  }

  &.animate-button {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>